<template>
	<view class="page">
		<view class="top-box">
			<image src="../../static/cout-bg.png" class="cout-bg" mode="widthFix"></image>
			<view class="content">
				<view class="flex-between align-center">
					<view class="screen-box flex-box align-center">
						<!-- <text class="screen">筛选</text> -->
						<!-- <picker mode="selector" :range="condition" @change="change" range-key="name"> -->
							<text class="condition" style="padding: 0 10rpx;">今日数据</text>
							<!-- <text class="iconfont icon-sanjiaoxing-xia"></text> -->
						<!-- </picker> -->
					</view>
					<navigator url="./detail" hover-class="none" class="screen-box flex-box align-center">
						<text class="condition">详情</text>
						<text class="iconfont icon-more"></text>
					</navigator>
				</view>
				<view class="list-box">
					<view class="flex-box align-center">
						<view class="item" @click="toUrl('/pages/storekeeper/order/index')">
							<view class="count">{{ pageData.today_payment?pageData.today_payment:'0' }}</view>
							<view class="txt">今日交易额</view>
							<view class="txt2">昨日{{ pageData.yesterday_payment?pageData.yesterday_payment:'0' }}</view>
						</view>
						<view class="item" @click="toUrl('/pages/storekeeper/myDevice/index')">
							<view class="count">{{ pageData.today_order?pageData.today_order:'0' }}</view>
							<view class="txt">今日成单数</view>
							<view class="txt2">昨日{{ pageData.yesterday_order?pageData.yesterday_order:'0' }}</view>
						</view>
						<view class="item" @click="toUrl('/pages/storekeeper/myDevice/index')">
							<view class="count">{{ pageData.today_visits?pageData.today_visits:'0' }}</view>
							<view class="txt">今日访问数</view>
							<view class="txt2">昨日{{ pageData.yesterday_visits?pageData.yesterday_visits:'0' }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="echart">
			<view class="qiun-columns">
				<view class="qiun-title-dot">下单数({{pageData.orderCount?pageData.orderCount:'0'}})</view>
				<view class="qiun-charts" >
					<canvas canvas-id="canvasArea" id="canvasArea" class="charts" @touchstart="touchLineA"
						 disable-scroll=true @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
				</view>
			</view>
			<view class="line"></view>
			<view class="qiun-columns">
				<view class="qiun-title-dot">七日成单率({{pageData.day7PayRatioCount?pageData.day7PayRatioCount:'0'}}%)</view>
				<view class="qiun-charts">
					<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" @touchstart="touchColumn"></canvas>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	var that;
	var canvaColumn = null,canvaArea = null;
	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				serverData: '',
				key:'今日',
				condition: [
					{name:'今日'},
					{name:'昨天'},
					{name:'前天'}
				],
				pageData:''
			};
		},
		onLoad() {
			that = this;
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.getServerData();
			// #ifdef H5
			this.$common.H5HideShare()
			// #endif
		},
		methods: {
			change(e){
				that.key = that.condition[e.detail.value].name
			},
			
			
			getServerData() {
				that.$http.get({
					url: '/singleSaleManageApi/tradeList',
					data:{
						shop_id: uni.getStorageSync('store_id'),
						// test:1
					}
				}).then(res => {
					if(res.data){
						that.pageData = res.data
						
						let series = [];
						res.data.day7PayRatio.forEach(item=>{
							series.push({
								"value": item,
								"color": "#FF784A"
							})
						})
						let Column = {
							"categories": res.data.day7PayName,
							"series": [{
								"name": "",
								"data": series,
								color: '#FF784A'
							}]
						}
						that.showColumn("canvasColumn", Column);
						let area =  {
							categories: res.data.thisHName,
							series: [{
								name: '下单数',
								data: res.data.thisPayOrder,
								color: '#FF784A'
							}]
						}
						that.showArea("canvasArea", area);
					}
				})
			},
			
			
			showColumn(canvasId, chartData) {
				canvaColumn = new uCharts({
					$this: that,
					canvasId: canvasId,
					type: 'column',
					legend: {
						show: false
					},
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: that.pixelRatio,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid: true,
						gridColor: '#F5F5F5',
						axisLine: false,
						fontColor:'#999999'
					},
					yAxis: {
						gridColor: '#F5F5F5',
						data: [{
							axisLine: false,
							fontColor:'#999999'
						}]
					},
					dataLabel: false,
					width: that.cWidth * that.pixelRatio,
					height: that.cHeight * that.pixelRatio,
					extra: {
						column: {
							type: 'group',
							width: that.cWidth * that.pixelRatio * 0.45 / chartData.categories.length
						}
					}
				});

			},
			showArea(canvasId, chartData) {
				canvaArea = new uCharts({
					$this: this,
					canvasId: canvasId,
					type: 'area',
					fontSize: 11,
					legend: {show:false},
					dataLabel: false,
					dataPointShape: true,
					background:'#FFFFFF',
					pixelRatio: 1,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true,//开启图表拖拽功能
					xAxis: {
						disableGrid: true,
						type:'grid',
						gridColor: '#F5F5F5',
						gridType:'dash',
						axisLine: false,
						fontColor:'#999999',
						itemCount: 6,//x轴单屏显示数据的数量，默认为5个
						scrollShow:true,//新增是否显示滚动条，默认false
						scrollAlign:'right',//滚动条初始位置
						scrollBackgroundColor:'#F7F7FF',//默认为 #EFEBEF
						scrollColor:'#ffe8e0',//默认为 #A6A6A6
					},
					yAxis: {
						data: [{
							axisLine: false,
							format:val=>{return parseInt(val)},
							fontColor:'#999999'
						}],
						gridColor: '#F5F5F5',
						padding: 150,
						splitNumber: 6
					},
					width: this.cWidth,
					height: this.cHeight,
					extra: {
						area:{
							type: 'curve',
							opacity:0.2,
							addLine: true,
							width:2
						}
					},
					
				});
			},
			touchColumn(e) {
				canvaColumn.showToolTip(e, {
					format: function(item, category) {
						if (typeof item.data === 'object') {
							return category + ' ' + item.name + ':' + item.data.value
						} else {
							return category + ' ' + item.name + ':' + item.data
						}
					}
				});
			},
			touchLineA(e){
				canvaArea.scrollStart(e);
			},
			moveLineA(e) {
				canvaArea.scroll(e);
			},
			touchEndLineA(e) {
				canvaArea.scrollEnd(e);//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaArea.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
		}

	}
</script>

<style lang="scss">
	.page {
		background-color: #FFFFFF;
	}

	.top-box {
		height: 446rpx;
		background: linear-gradient(130deg, rgba(255, 112, 63, 0.66) 0%, #EE3C00 100%);
		position: relative;
		overflow: hidden;

		.cout-bg {
			position: absolute;
			width: 100%;
			height: 100%;
			bottom: -150rpx;
		}

		.content {
			position: relative;
			z-index: 3;
			padding: $page-space;

			.screen-box {
				background-color: #FFFFFF;
				height: 48rpx;
				padding: 0 18rpx;
				border-radius: 48rpx;

				.screen {
					color: $color-text-aid;
					font-size: 28rpx;
				}

				.condition {
					padding: 0 4rpx 0 20rpx;
					font-size: 28rpx;
				}

				.icon-sanjiaoxing-xia {
					color: #CCCCCC;
					font-size: 18rpx;
				}

				.icon-more {
					position: relative;
					// top: 4rpx;
				}
			}

			.list-box {
				background-color: #ffffff;
				margin-bottom: $page-space;
				border-radius: $border-radius-lg;
				justify-content: space-around;

				padding: 30rpx 20rpx;
				box-shadow: 0px 0px 4rpx 0px rgba(0, 0, 0, 0.06);
				border: 2rpx solid rgba(151, 151, 151, 0.05);
				margin-top: 60rpx;

				.item {
					text-align: center;
					position: relative;

					&::before {
						content: '';
						position: absolute;
						top: 50%;
						left: 100%;
						width: 2rpx;
						height: 74rpx;
						transform: translateY(-50%);
						background-color: #EEEEEE;
					}

					&:nth-last-of-type(1)::before {
						display: none;
					}

					flex: 1;

					.menu {
						width: 56rpx;
						height: 56rpx;
						overflow: inherit;
					}

					.count {
						font-weight: 600;
						text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.06);
						font-size: 36rpx;
					}

					.txt {
						font-size: 26rpx;
						color: #666666;
						margin: 14rpx 0 6rpx;
					}

					.txt2 {
						font-size: 22rpx;
						color: #CCCCCC;
					}
				}
			}
		}
	}

	.echart {
		background-color: #FFFFFF;
		min-height: 200rpx;
		position: relative;
		top: -30rpx;
		z-index: 3;
		border-radius: 20rpx 20rpx 0px 0px;

		padding: 30rpx 0;

	
		.line{
			height: 1px;
			background-color: #EEEEEE;
			margin: 40rpx 20rpx;
		}
	

		.qiun-columns {
			.qiun-title-dot {
				padding-left: 30rpx;
				padding-bottom: 10rpx;
			}

			flex-direction:column !important;
		}

		.qiun-charts {
			width: 100%;
			height: 500upx;
			background-color: #FFFFFF;
		}

		.charts {
			width: 750upx;
			height: 500upx;
			background-color: #FFFFFF;
		}

	}
</style>
